<template>
	<view class="bg-white" :style="themeColor()">
		<block v-if="!loading">
			<view class="p-[30rpx]">
				<view class="text-[32rpx] font-500 mb-[16rpx] multi-hidden leading-[1.4]">{{articleDetail.title}}</view>
				<view class="text-[24rpx] text-[var(--text-color-light9)]">
					{{articleDetail.create_time}}
				</view>
				<view class="items-center flex mt-[40rpx]">
					<image class="w-[80rpx] h-[80rpx] mr-[14rpx]" :src="img('addon/shop/payment/position_01.png')" mode="aspectFit"></image>
					<view class="flex flex-col mr-[20rpx] w-[540rpx]">
						<text class="text-[28rpx] truncate text-[#333]">Niushop开源商城系统-资讯中心</text>
						<text class="text-[var(--text-color-light9)] truncate text-[24rpx] mt-[16rpx]">资讯中心的简单介绍</text>
					</view>
					<text class="!text-[32rpx] text-[var(--text-color-light9)] ml-[auto] nc-iconfont nc-icon-youV6xx"></text>
				</view>
				<view class="bg-[var(--temp-bg)] px-[var(--pad-sidebar-m)] py-[var(--pad-sidebar-m)] text-[26rpx] mb-[30rpx] mt-[40rpx] flex items-baseline rounded-[var(--rounded-big)]" v-if="articleDetail.summary">
					<text class="text-[var(--text-color-light6)] whitespace-pre">{{t('abstract')}}：</text>
					<text class="leading-[1.3] text-[#333]">{{articleDetail.summary}}</text>
				</view>
				<u-parse :content="articleDetail.content" :tagStyle="style"></u-parse>
			</view>
			<view class="flex justify-center py-[30rpx]">
				<view class="collect w-[150rpx] h-[80rpx] flex flex-col items-center justify-center border-[2rpx] border-solid rounded-[50rpx] mr-[80rpx] border-[#F41941]">
					<image class="w-[30rpx] h-[30rpx]" :src="img('addon/cms/detail/collect.png')" mode="aspectFit"></image>
					<text class="text-[20rpx] mt-[10rpx] text-[#F41B41]">收藏</text>
				</view>
				<view class="give-like w-[150rpx] h-[80rpx] flex flex-col items-center justify-center border-[2rpx] border-solid border-[#FF5400] rounded-[50rpx]">
					<image class="w-[30rpx] h-[30rpx]" :src="img('addon/cms/detail/give_like.png')" mode="aspectFit"></image>
					<text class="text-[20rpx] mt-[10rpx] text-[#FF5500]">点赞</text>
				</view>
			</view>
			<view class="flex justify-between pt-[40rpx] pb-[60rpx] px-[22rpx] border-0 border-t-[2rpx] border-solid border-[#f6f6f6]">
				<view class="flex items-center text-[#000]">
					<text class="!text-[30rpx] text-[#333] -mb-[4rpx] nc-iconfont nc-icon-zuoV6xx"></text>
					<text class="text-[26rpx] text-[#333]">上一篇</text>
				</view>
				<view class="flex items-center text-[#000]">
					<text class="text-[26rpx] text-[#333]">下一篇</text>
					<text class="!text-[30rpx] -mb-[4rpx] text-[#333] nc-iconfont nc-icon-youV6xx"></text>
				</view>
			</view>
		</block>
		<loading-page :loading="loading"></loading-page>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import { redirect, img } from '@/utils/common'
	import { t } from '@/locale'
	import { getArticleDetail } from '@/addon/cms/api/article';
	import { useShare } from '@/hooks/useShare'

	const { setShare } = useShare()

	const articleDetail:any = ref<Array<any>>([]);
	const loading = ref<boolean>(true);
	let style = {
		h2: 'margin-bottom: 15px;',
		p: 'margin-bottom: 10px;line-height: 1.5;word-break: break-all;',
		img: 'margin: 10px 0;vertical-align: top;',
	};
	onLoad((option:any) => {
		loading.value = true;
		getArticleDetail(option.id).then((res:any) => {
			articleDetail.value = res.data;
			loading.value = false;
			let share = {
				title: articleDetail.value.title,
				desc: articleDetail.value.intro,
				url: articleDetail.value.image
			}
            uni.setNavigationBarTitle({
                title: articleDetail.value.title
            })
			setShare({
				wechat: {
					...share
				},
				weapp: {
					...share
				}
			});
		});
	})
</script>
<style lang="scss" scoped>
	
</style>
